<template>
    <div id="backcont">
        <div class="meituan-content">
            <div class="login-cont">
                <div class="meituan-title">实验室成果管理系统</div>
                <div class="meituan-user">
                    <p>用户名</p>
                    <el-input v-model="account" class="inptflex" style="width: 240px" placeholder="请输入用户名" />
                </div>
                <div class="meituan-user">
                    <p>密码</p>
                    <el-input v-model="password" class="inptflex" style="width: 240px" placeholder="请输入密码" />
                </div>
                <!--登录和注册按钮的切换-->
                <div class="reg-view" @click="regi = regi == '登录' ? '注册' : '登录'"><p>{{ regi }}</p></div>
                <!--登录或注册按钮的提交-->
                <el-button v-if="regi == '注册'" @click="signin" type="success" class="meituan-btn" round>登录</el-button>
                <el-button v-else type="success" @click="register" class="meituan-btn" round>注册</el-button>
            </div>
        </div>
       
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default{
    setup(){
        const user = reactive({
            account:'',
            password:'',
            regi:'注册'

        })
        //登录
        const signin =()=>{
           console.log(user.account,user.password)

        }
        //注册
        const register = ()=>{

        }
        return{...toRefs(user),signin,register}
    }
}
</script>
<style>

</style>